<template>
  <my-dialog title="Part Hard Time Replacement" :submit="submitFn" :mode="props.mode">
    <div class="q-gutter-md q-pa-md">
      <!-- <q-select
        v-model="state.stockData.stock_code"
        :options="options"
        label="Stock Code"
        
        borderless
        class="input-css"
        :readonly="props.mode=='edit'"
      /> -->
      <q-input
        v-model="state.stockData.component"
        type="text"
        label="Component"
        
        borderless
        class="input-css"
        />
        <!-- :readonly="props.mode=='edit'" -->
    
      <q-input v-model="state.stockData.period" type="number" label="Period(Months)" 
      borderless
      class="input-css" />
      <div class="text-red">
        Any update will effect to incomplete maintenance order immediately. 
      </div>
    </div>
  </my-dialog>
 
</template>

<script setup lang="ts">
import { useQuasar } from 'quasar';
import {
  createStockItemHtreplace,
  getChildStockItems,
  patchStockItemHtreplace,
} from 'src/services/stockCodeService';
import { StockItemHTReplacement } from 'src/services/type';
import { onMounted, reactive, ref } from 'vue';
import MyDialog from '../container/MyDialog.vue';

const emit = defineEmits(['submit', 'close']);

const $q = useQuasar();
const props = defineProps<{
  mode: 'edit' | 'create';
  editRow?:StockItemHTReplacement
  stockCode?: string
}>();

const stockCodeOpts = ref<string[]>([])
const options= ref(stockCodeOpts)

const state = reactive<{
  stockData: StockItemHTReplacement;
}>({
  stockData: {
    stock_code: '',
    id: 0,
    component: '',
    period: 1,
  },
});

onMounted(() => {
  if(props.stockCode){
    state.stockData.stock_code = props.stockCode
  }
  initData()
})

async function initData() {
  if (props.mode == 'edit'&&props.editRow&&props.stockCode) {
    
    state.stockData = props.editRow
    state.stockData.stock_code = props.stockCode
  }
  if (props.mode=='create' && props.stockCode){
    stockCodeOpts.value.unshift(props.stockCode)
    const res = await getChildStockItems(props.stockCode)
    if(res.data){
      for(let d of res.data){
        stockCodeOpts.value.push(d.child.stock_code)
      }
    }
  }
}

async function create() {
  if (props.stockCode) {
    const createRes = await createStockItemHtreplace(
      state.stockData.stock_code,
      state.stockData.component,
      state.stockData.period
    );

    if (createRes) {
      $q.notify({
        color: 'positive',
        message: 'Created',
        icon: 'check',
        
      });
      emit('submit');
      emit('close');
    }
  }
}

async function edit() {
  
  if (props.editRow) {
    const res = await patchStockItemHtreplace(props.editRow.id, state.stockData.period, state.stockData.component);
    if (res) {
      $q.notify({
        color: 'positive',
        message: 'Created',
        icon: 'check',
      });
      emit('submit');
      emit('close');
    }
  }
  return;
}

function submitFn() {
  if (props.mode == 'create') {
    create();
  } else {
    edit();
  }
}



</script>

<style scoped>
.cap {
  text-transform: capitalize;
}
</style>
